<template>
	<view>
		<!-- 投诉举报-->
		<view v-if="activeid==3">
			<view class="z-card" v-for="(item,index) in dataList" :key="index">
				<view class="z-list">
					<view class="z-list-margin">
						<view class="z-label">项目名称：</view>
						<view class="z-text">古法推拿</view>
						<!--  -->
						<view class="z-status" style="color:#41C088" v-if="item.status==1">已解决</view>
						<view class="z-status" style="color:#B80048" v-else-if="item.status==2">已驳回</view>
						<view class="z-status" style="color:#F82323" v-else>审核中</view>
					</view>
				</view>
				<view class="z-list">
					<view class="z-list-margin">
						<view class="z-label">订单编号：</view>
						<view class="z-text">158464548546</view>
					</view>
				</view>
				<view class="z-list">
					<view class="z-list-margin">
						<view class="z-label">投诉账号：</view>
						<view class="z-text">158464548546</view>
					</view>
				</view>
				<view class="z-list">
					<view class="z-list-margin">
						<view class="z-label">投诉原因：</view>
						<view class="z-text">郭晓刚</view>
					</view>
				</view>
				<view class="z-list">
					<view class="z-list-margin">
						<view class="z-label">反馈内容：</view>
						<view class="z-text textBagLine">啊啊啊 啊啊啊啊 啊啊啊啊啊 啊啊啊 啊备份 2</view>
					</view>
				</view>
				<!-- 附件-->
				<view class="list" style="margin-top: 10px;border:0;">
					<view class="textImage">
						<u-upload :fileList="fileList1" :maxCount="1" width="56" disabled :deletable="false" height="56"
							multiple></u-upload>
					</view>
				</view>
				<view class="z-list">
					<view class="z-list-margin">
						<view class="z-label">手机号：</view>
						<view class="z-text">158464548546</view>
					</view>
				</view>
				<view class="examineView">
					<view class="btn_complaint">驳回投诉</view>
					<view class="btn_solve">已解决</view>
				</view>
			</view>


		</view>
		<!-- end -->
		<!-- 反馈记录 -->
		<!-- v-for="(item,index) in dataList" :key="index" -->
		<view v-else-if="activeid==0">
			<view class="z-card" v-for="(item,index) in dataList" :key="index">
				<view class="z-list">
					<view class="z-list-margin">
						<view class="z-label">反馈时间：</view>
						<view class="z-text">2023.03.25</view>
						<!-- <view class="z-status">已解决</view> -->
					</view>
				</view>
				<view class="z-list">
					<view class="z-list-margin">
						<view class="z-label">联系电话：</view>
						<view class="z-text">158464548546</view>
					</view>
				</view>
				<!-- <view class="z-list">
					<view class="z-list-margin">
						<view class="z-label">反馈账号：</view>
						<view class="z-text">158464548546</view>
					</view>
				</view> -->
				<!-- 	<view class="z-list">
					<view class="z-list-margin">
						<view class="z-label">反馈内容：</view>
						<view class="z-text">郭晓刚</view>
					</view>
				</view> -->
				<view class="z-list">
					<view class="z-list-margin" style="display: flex; align-items: center;
					flex-wrap: wrap;">
						<view class="section_1 flex-col">
							<view class="text-wrapper_2 flex-row justify-between">
								<text class="text_5">反馈内容：</text>
								<text class="text_6">{{content}}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 附件-->
				<view class="list" style="margin-top: 10px;border:0;">
					<view class="textImage">
						<u-upload :fileList="fileList1" :maxCount="1" width="56" disabled :deletable="false" height="56"
							multiple></u-upload>
					</view>
				</view>
			</view>

		</view>
		<!-- end -->
		<view v-else-if="activeid==1">
			<view class="z-card" v-for="(item,index) in dataList" :key="index">
				<view class="z-list">
					<view class="z-list-margin">
						<view class="z-label">反馈时间：</view>
						<view class="z-text">2023.03.25</view>
						<!-- <view class="z-status">已解决</view> -->
					</view>
				</view>
				<view class="z-list">
					<view class="z-list-margin" style="display: flex; align-items: center;
					flex-wrap: wrap;">
						<view class="section_1 flex-col">
							<view class="text-wrapper_2 flex-row justify-between">
								<text class="text_5">反馈内容：</text>
								<text class="text_6">{{content}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="z-list">
					<view class="z-list-margin">
						<view class="z-label">投诉原因：</view>
						<view class="z-text">郭晓刚</view>
					</view>
				</view>
				<view class="z-list">
					<view class="z-list-margin">
						<view class="z-label">联系电话：</view>
						<view class="z-text">158464548546</view>
					</view>
				</view>
				<!-- 附件-->
				<view class="list" style="margin-top: 10px;border:0;">
					<view class="textImage">
						<u-upload :fileList="fileList1" :maxCount="1" width="56" disabled :deletable="false" height="56"
							multiple></u-upload>
					</view>
				</view>
			</view>

		</view>
		<!-- end -->
		<!-- end -->
		<view v-else-if="activeid==4">
			<view class="z-card" v-for="(item,index) in dataList" :key="index">
				<!-- <view class="z-list">
					<view class="z-list-margin">
						<view class="text_5" style="width: 140rpx;">反馈时间：</view>
						<view class="z-text" style="font-size: 28rpx;color:#343434!important;">{{item.createTime}}
						</view> 
					</view>
				</view> -->
				<view class="z-list">
					<view class="z-list-margin" style="display: flex; align-items: center;
					flex-wrap: wrap;">
						<view class="section_1 flex-col">
							<view class="text-wrapper_2 flex-row justify-between">
								<text class="text_5" style="width: 140rpx;">反馈时间：</text>
								<text class="text_6"  style="font-size: 28rpx;color:#A4A4A4!important;">{{item.createTime}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="z-list">
					<view class="z-list-margin" style="display: flex; align-items: center;
					flex-wrap: wrap;">
						<view class="section_1 flex-col">
							<view class="text-wrapper_2 flex-row justify-between">
								<text class="text_5" style="width: 140rpx;">反馈内容：</text>
								<text class="text_6"  style="font-size: 28rpx;color:#A4A4A4!important;">{{item.content}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="z-list">
					<view class="z-list-margin" style="display: flex; align-items: center;
					flex-wrap: wrap;">
						<view class="section_1 flex-col">
							<view class="text-wrapper_2 flex-row justify-between">
								<text class="text_5" style="width: 140rpx;">联系电话：</text>
								<text class="text_6"  style="font-size: 28rpx;color:#A4A4A4!important;">{{item.phone}}</text>
							</view>
						</view>
					</view>
				</view> 
				<!-- 附件-->
				<view class="list" style="margin-top: 10px;border:0;">
					<view class="textImage">
					<image v-for="(items,indexs) in item.imgList" @click="showPho(item.imgList,indexs)" style="width: 118rpx;height: 118rpx;margin-right: 10rpx;" :src="items" mode=""></image>
					</view>
				</view>
			</view>

		</view>
		<!-- end -->
		<view v-else-if="activeid==5">
			<view class="z-card" v-for="(item,index) in dataList" :key="index"> 
				<view class="z-list">
					<view class="z-list-margin" style="display: flex; align-items: center;
						flex-wrap: wrap;">
						<view class="section_1 flex-col">
							<view class="text-wrapper_2 flex-row justify-between">
								<text class="text_5" style="width: 140rpx;">投诉时间：</text>
								<text class="text_6" style="font-size: 28rpx;">{{item.createTime}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="z-list">
					<view class="z-list-margin" style="display: flex; align-items: center;
						flex-wrap: wrap;">
						<view class="section_1 flex-col">
							<view class="text-wrapper_2 flex-row justify-between">
								<text class="text_5" style="width: 140rpx;">投诉内容：</text>
								<text class="text_6" style="font-size: 28rpx;">{{item.content}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="z-list">
					<view class="z-list-margin" style="display: flex; align-items: center;
						flex-wrap: wrap;">
						<view class="section_1 flex-col">
							<view class="text-wrapper_2 flex-row justify-between">
								<text class="text_5" style="width: 140rpx;">投诉原因：</text>
								<text class="text_6" style="font-size: 28rpx;">{{item.cause}}</text>
							</view>
						</view>
					</view>
				</view>  
				<view class="z-list">
					<view class="z-list-margin" style="display: flex; align-items: center;
						flex-wrap: wrap;">
						<view class="section_1 flex-col">
							<view class="text-wrapper_2 flex-row justify-between">
								<text class="text_5" style="width: 140rpx;">联系电话：</text>
								<text class="text_6" style="font-size: 28rpx;">{{item.phone}}</text>
							</view>
						</view>
					</view>
				</view>  
				
				<!-- 附件-->
				<view class="list" style="margin-top: 10px;border:0;">
					<view class="textImage">
					<image v-for="(items,indexs) in item.imgList" @click="showPho(item.imgList,indexs)" style="width: 118rpx;height: 118rpx;margin-right: 10rpx;" :src="items" mode=""></image>
					</view>
				</view>
			</view>

		</view>
		<!-- end -->
	</view>
</template>

<script>
	export default {
		name: "ztab",
		props: ["labelList", "activeid", "dataList"],
		data() {
			return {
				isCollapse: false,

				content: `山不在高山不在高山不山不在高山不在高山不山不在高山不在高山不山不在高山不在高山不山不在高山不在高山不山不在高山不在高山不山不在高山不在高山不山不在高山不在高山不山不在高山不在高山不山不在高山不在高山不`,
				fileList1: []
			};
		},
		mounted() {
			// this.toggleDiv()
		},
		methods: {
			getActiveLabel(index) {
				this.$emit("getActiveLabel", index)
			},
			showPho(item,index){
				this.$emit("showSwiper", encodeURIComponent(JSON.stringify(item)),index)
			},
			toggleDiv() {
				this.isCollapse = !this.isCollapse
				if (this.isCollapse) {
					this.$refs['box1'].style.height = 0
				} else {
					// 这个时候，box1已经收缩了，但是需要展开，那就必须获取到它的高度(此时它的style的height为0)
					console.log(this.$refs['box1'].scrollHeight);
					this.$refs['box1'].style.height = this.$refs['box1'].scrollHeight + 'px'
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;
	}

	.box1 {
		// width: 200px;
		/* height: 200px; */
		transition: height 0.28s;
		overflow: hidden;
	}

	.text-wrapper_2 {
		width: 660rpx;
		border-radius: 4rpx;

		.text_5 {
			font-size: 28rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.text_6 {
			font-size: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #A4A4A4;
			 word-break: break-all;
		}
	}



	.box1 .box1-item {
		height: 20px;
		border: 1px solid red;
	}

	.z-card {
		width: 95%;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 8px;
		margin-top: 8px;
		padding-bottom: 10px;

		.textImage {
			margin-right: 10px;
			font-family: PingFangSC-Semibold;
			font-size: 16px;
			margin-left: 15px;
			color: #FF8F1C;
			letter-spacing: 0;
			font-weight: 600;
		}

		.z-list {
			width: 100%;
			display: flex;
			align-items: center;

			.moreBox {
				border-radius: 26px;
				// border: 1px solid rgba(200, 200, 202, 1);
				overflow-wrap: break-word;
				color: rgba(46, 46, 46, 1);
				font-size: 28rpx;
				text-align: right;
				padding: 5rpx 0rpx;
				font-weight: normal;
				white-space: nowrap;
				margin-left: 30rpx;
			}

			.z-list-margin {
				margin-top: 13px;
				margin-left: 15px;
				width: 100%;
				display: flex;
				align-items: center;
				position: relative;

				.z-label {
					width: auto;
					font-size: 14px;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #343434;
					line-height: 12px;



				}

				.z-text {
					width: 260px;
					font-size: 14px;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #A4A4A4 !important;
				}

				.z-status {
					position: absolute;
					right: 16px;
					width: 42px;
					height: 14px;
					font-size: 14px;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #41C088;
					line-height: 14px;
				}
			}


		}
	}

	.examineView {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: right;
		border-top: 1px solid #E6E6E6;
		margin-top: 16px;
		padding-top: 7px;

		.btn_complaint {
			width: 119rpx;
			height: 44rpx;
			background: #FFFFFF;
			border-radius: 4px;
			text-align: center;
			line-height: 44rpx;
			border: 1px solid #E0E0E0;
			font-size: 12px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #4E4E4E;
		}

		.btn_solve {
			width: 119rpx;
			height: 44rpx;
			background: #FFFFFF;
			border-radius: 4px;
			text-align: center;
			line-height: 22px;
			border: 1px solid #E0E0E0;
			font-size: 12px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #4E4E4E;
			margin-left: 8px;
			margin-right: 19px;
		}
	}
</style>